<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh,delete')}
                        <a class="btn btn-info btn-disabled disabled btn-selected" href="javascript:;"><i class="fa fa-leaf"></i> 獲取選中項</a>
                        <a class="btn btn-success btn-toggle-view" href="javascript:;"><i class="fa fa-leaf"></i> 切換視圖</a>
                    </div>
                    <table id="table" class="table table-striped table-hover" width="100%">

                    </table>

                </div>
            </div>

        </div>
    </div>
</div>
<style type="text/css">
    .example {
        height:100%;position: relative;
    }
    .example > span {
        position:absolute;left:15px;top:15px;
    }
</style>

<script id="itemtpl" type="text/html">
    <!--
    如果啟用了templateView,默認調用的是itemtpl這個模板，可以通過設置templateFormatter來修改
    在當前模板中可以使用三個變量(item:行數據,i:當前第幾行,data:所有的行數據)
    此模板引擎使用的是art-template的native,可參考官方文檔
    -->

    <div class="col-sm-4 col-md-3">
        <!--下面四行是為了展示隨機圖片和標簽，可移除-->
        <% var imagearr = ['https://cdn.fastadmin.net/uploads/addons/blog.png', 'https://cdn.fastadmin.net/uploads/addons/cms.png', 'https://cdn.fastadmin.net/uploads/addons/vote.png', 'https://cdn.fastadmin.net/uploads/addons/blog.png', 'https://cdn.fastadmin.net/uploads/addons/alisms.png']; %>
        <% var image = imagearr[item.id % 5]; %>
        <% var labelarr = ['primary', 'success', 'info', 'danger', 'warning']; %>
        <% var label = labelarr[item.id % 5]; %>
        <div class="thumbnail example">
            <span class="btn btn-<%=label%>">ID:<%=item.id%></span>
            <img src="<%=image%>" style="width:100%;" alt="<%=item.title%>">
            <div class="caption">
                <h4><%=item.title?item.title:'無'%></h4>
                <p class="text-muted">操作者IP:<%=item.ip%></p>
                <p class="text-muted">操作時間:<%=Moment(item.createtime*1000).format("YYYY-MM-DD HH:mm:ss")%></p>
                <p>
                    <!--詳情的事件需要在JS中手動綁定-->
                    <a href="#" class="btn btn-primary btn-success btn-detail" data-id="<%=item.id%>"><i class="fa fa-camera"></i> 詳情</a> 

                    <!--如果需要響應編輯或刪除事件，可以給元素添加 btn-edit或btn-del的類和data-id這個屬性值-->
                    <a href="#" class="btn btn-primary btn-edit" data-id="<%=item.id%>"><i class="fa fa-pencil"></i> 編輯</a> 
                    <a href="#" class="btn btn-danger btn-del" data-id="<%=item.id%>"><i class="fa fa-times"></i> 刪除</a>
                    <span class="pull-right" style="margin-top:10px;">
                        <!--如果需要多選操作，請確保有下面的checkbox元素存在,可移除-->
                        <input name="checkbox" data-id="<%=item.id%>" type="checkbox" />
                    </span>
                </p>
            </div>
        </div>
    </div>
</script>